<template>
  <div class="songItem">
    <div class="left">
      <h3 v-html="$options.filters.hightlight(item.name, keywords)"></h3>
      <p>
        <template v-if="item.song">
          <span
            v-html="
              $options.filters.hightlight(item.song.artists[0].name, keywords)
            "
          ></span>
        </template>
        <template v-if="item.artists">
          <span
            v-html="$options.filters.hightlight(item.artists[0].name, keywords)"
          ></span>
        </template>
        <template v-if="item.ar">
          <span v-html="$options.filters.hightlight(item.ar[0].name, keywords)">
            --

            <span
              v-html="$options.filters.hightlight(item.name, keywords)"
            ></span>
          </span>
        </template>
        --

        <span v-html="$options.filters.hightlight(item.name, keywords)"></span>
      </p>
    </div>
    <template>
      <div
        class="playbtn"
        @click="play(item)"
        v-if="item.id == $root.musicStore.musicID ? false : true"
      ></div>
      <div
        class="loading"
        v-if="item.id == $root.musicStore.musicID ? true : false"
      >
        <div>
          <i :class="{ pause: $root.musicStore.isplay == false }"></i>
          <i :class="{ pause: $root.musicStore.isplay == false }"></i>
          <i :class="{ pause: $root.musicStore.isplay == false }"></i>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loadingShow: false,
    };
  },
  props: ["item", "keywords"],
  filters: {
    hightlight(val, keywords) {
      let reg = new RegExp(keywords, "g");
      if (typeof keywords == "undefined") {
        return val;
      }
      if (reg.test(val)) {
        return val.replace(
          reg,
          "<span style='color:rgb(80,125,175);'>" + keywords + "</span>"
        );
      }
      return val;
    },
  },
  methods: {
    play(item) {
      this.$root.musicStore.musicID = item.id;
      this.$root.musicStore.currentMusic = item;
      let newArr = this.$root.musicStore.musicList;
      this.loadingShow = true;
      let find = false;
      for (let n of newArr) {
        if (n.id == item.id) {
          find = true;
        }
      }
      if (!find) this.$root.musicStore.musicList.push(item);
      this.$emit("add-list");
    },
  },
};
</script>

<style lang="less" scoped>
.songItem {
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(245, 245, 245);
  padding: 6px 0;
  .left {
    flex: 1;
    h3 {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
    p {
      color: #aaa;
      font-size: 12px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
      overflow: hidden;
    }
  }
  .playbtn {
    width: 22px;
    height: 22px;
    margin-right: 20px;
    background: url(../assets/index_icon.png) no-repeat -24px 0px;
    background-size: 166px 97px;
    cursor: pointer;
  }
}

.loading {
  margin-right: 20px;
  div {
    width: 20px;
    display: flex;
    justify-content: space-between;
    i {
      display: inline-block;
      width: 5px;
      height: 20px;
      margin-right: 3px;
      background-color: rgb(238, 212, 65);
      transform-origin: bottom;
      animation: loading 0.5s linear 0s infinite;
      &.pause {
        animation-play-state: paused;
      }
      &:nth-of-type(2) {
        animation-delay: -0.2s;
      }
      &:nth-of-type(3) {
        animation-delay: -0.6s;
      }
    }
  }
}

.loading div i:nth-of-type(2) {
  background-color: rgb(214, 88, 88);
}
.loading div i:nth-of-type(3) {
  background-color: cornflowerblue;
}
@keyframes loading {
  0% {
    transform: scaleY(0.4);
  }
  100% {
    transform: scaleY(1.2);
  }
}
</style>